<template>
  <div class="list-func">
    <!-- 选择框 -->
    <div class="func-input">
      <el-input
        size="large"
        clearable
        v-model.trim="formValue.value"
        placeholder="请输入查询内容"
        class="input-with-select"
        @keyup.enter="handleSearch"
      >
        <template #prepend>
          <el-select
            v-model="formValue.label"
            placeholder="Select"
            size="large"
            style="width: 110px"
          >
            <template v-for="item in formConfig.selectOptions">
              <el-option :label="item.label" :value="item.value" />
            </template>
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" v-debounce:300="handleSearch" />
        </template>
      </el-input>
    </div>
    <!-- 功能按钮 -->
    <div class="func-btn">
      <div>
        <!-- <template v-for="item in formConfig.btnOptions">
          <el-button type="primary" :icon="item.icon" @click="handleBtnClick(item)">{{item.text}}</el-button>
        </template> -->
        <!-- <template> -->
        <!-- 功能按钮的插槽 -->
        <slot name="btnFunction"></slot>
        <!-- </template> -->
      </div>

      <el-button class="refresh" type="danger" :icon="Refresh" @click="$router.go(0)" plain>刷新</el-button>
    </div>
  </div>
</template>

<script setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { ref, defineProps, watch, inject } from 'vue';
const props = defineProps({
  // form 的表单参数
  formConfig: {
    type: Object,
    default: () => {}
  },
})

// 接收 admin 组件注入的数据（跨组件传递，爷-孙）
const formData = inject('formValue')
const changeForm = inject('changeFormValue')

// 拷贝一份传递过来的表单初始数据（不直接使用是因为遵循单向数据流的原则）
const formValue = ref({ ...formData })

// 点击查询，调用爷组件的函数
const handleSearch = () => {
  changeForm(formValue.value)
}
</script>

<style lang="less" scoped>
.list-func {
  width: 100%;
  height: 100%;
  margin-top: -5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  .func-input {
    .input-with-select {
      width: 500px;
    }
    margin-right: 20px;
  }
  .func-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .refresh {
      margin-right: 10px;
    }
  }
}
</style>
